<!--
 * @Description: 编辑学籍
 * @Author: 老五 13521685612@163.com
 * @Date: 2024-11-03 00:41:09
 * @LastEditors: 老五 13521685612@163.com
 * @LastEditTime: 2024-11-21 23:10:38
 * @FilePath: /lieshou-app/pages/my_academic.vue
-->

<template>
	<view class="content">
		<!-- 1 -->
		<z-paging ref="paging" safe-area-inset-bottom="true">
			<view slot="top">
				<zNav title="我的学籍" :showBack="true"></zNav>
				<!-- 用户信息 -->
				<view class="user-box">
					<image :src="userInfo.avatar" class="user-logo">
					</image>
					<view class="user-info">
						<view class="user-name">{{userInfo.nickname}}</view>
						<view class="user-tag-box">
							<!-- <view class="user-num">学分： 165分</view> -->
							<!-- <view class="user-tag">
								<image src="@/static/image/icon/huangguan-icon.png" class="icon"></image>
								三年级
							</view> -->
						</view>
					</view>
				</view>
			</view>

			<!-- 问题列表 -->
			<view class="ques-box">
				<view class="ques-list" v-for="(item,index) in list" :key="index">
					<view class="ques-title">
						<view class="ques-sort">{{'0'+(index+1)}}</view> {{item.title}}
						<view class="ques-desc"><span>*</span>
							{{item.desc}}
						</view>
					</view>

					<view class="quest-box" v-if="item.type==='radio'">
						<uv-row justify="space-between" gutter="10">
							<uv-col :span="items.name.length>15?10:6" v-for="(items,indexs) in item.selectList"
								:key="indexs" @click="getSelected(index,items,indexs)">
								<view class="quest-label">
									<image v-if="items.actived" src="@/static/image/icon/select-icon.png" class="icon">
									</image>
									<image v-else-if="items.disabled" src="@/static/image/icon/xuanzhong.png"
										class="icon">
									</image>
									<image v-else-if="!items.actived&&!items.disabled"
										src="@/static/image/icon/no-select-icon.png" class="icon"></image>
									{{items.name}}
								</view>

							</uv-col>

							</block>
						</uv-row>
					</view>
					<view class="quest-label" v-else>
						<!-- <uni-data-select v-model="item.name" :localdata="item.selectList"
							@change="change"></uni-data-select> -->
							<superwei-combox :candidates="item.selectList" :isJSON="true" keyName="text" placeholder="请选择或输入"
							  v-model="item.name" @input="input_json" @select="change"></superwei-combox>
						<!--  -->	
					</view>
				</view>
			</view>
			<view class="gap"></view>
		</z-paging>
	</view>
</template>

<script>
	import zNav from '@/components/z-nav.vue'
	export default {
		components: {
			zNav
		},
		data() {
			return {
				userInfo: {
					avatar: "",
					nickname: ""
				},
				// question列表
				list: [{
						desc: '用于小程序推荐免费的课程与书籍',
						title: '你当前的情感状态',
						type: 'radio',
						selectList: [{
							name: '脱单中(无对象)'
						}, {
							name: '脱单中(有对象)'
						}, {
							name: '恋爱中(刚恋爱)'
						}, {
							name: '恋爱中(感情稳定)'
						}, {
							name: '恋爱中(有矛盾)'
						}, {
							name: '恋爱中(准备结婚)'
						}, {
							name: '已婚(初婚)'
						}, {
							name: '已婚(备孕中)'
						}, {
							name: '已婚(感情稳定)'
						}, {
							name: '已婚(有矛盾)'
						}, {
							name: '已婚(准备离婚)'
						}, {
							name: '已离异(想脱单)'
						}]
					},
					{
						desc: '用于小程序推荐免费的课程与书籍',
						title: '你的工作年限',
						type: 'radio',
						selectList: [{
							name: '尚未毕业'
						}, {
							name: '工作1-3年'
						}, {
							name: '工作4-10年'
						}, {
							name: '工作11-20年'
						}, {
							name: '工作20年以上'
						}]
					},
					{
						desc: '用于小程序推荐免费的课程与书籍',
						title: '您当前的身份',
						type: 'radio',
						selectList: [{
							name: '创业者'
						}, {
							name: '想/准备创业'
						}, {
							name: '职场人'
						}, {
							name: '自由职业/在读'
						}, {
							name: '全职妈妈/太太'
						}]
					},
					{
						desc: '用于小程序推荐免费的课程与书籍',
						title: '您当前的职位',
						type: 'radio',
						selectList: [{
							name: '职场个体(不带人)'
						}, {
							name: '职场管理(带1-19人)'
						}, {
							name: '业务负责人/总监'
						}, {
							name: '职场高管'
						}, {
							name: '体制内(医生/老师/国企/公务员等)'
						}]
					},
					{
						desc: '用于组织各城市的线下活动',
						title: '您的常驻城市',
						name: 1,
						type: 'select',
						selectList: [{
								value: 0,
								id:1,
								text: "北京"
							},
							{
								value: 1,
								id:2,
								text: "太原"
							},
							{
								value: 2,
								id:3,
								text: "成都"
							},
						]
					}
				]
			}
		},
		async onLoad() {
			let userInfo = await this.$utils.getStorage('userInfo')
			if (userInfo) {
				this.userInfo = userInfo
				this.$utils.showLog('获取用户信息我的学籍-页面', userInfo)
			}
			this.initAnswer()
		},
		methods: {
			change(e) {
				console.log(e)
				this.list[4].name = e.text
				this.getSave()
				this.$forceUpdate()
			},
			input_json(e){
				  console.log('222',e) // 选项一
				  this.list[4].name = e
			},
			getSave() {
				setTimeout(() => {
					this.$apis.getSurveySubmit({
						survey_id: 0,
						answer: JSON.stringify(this.list)
					}).then((element) => {
						this.$utils.showLog('提交我的学籍', element)
						uni.$uv.toast('已更新')
						this.$utils.setStorage('answer', this.list)
					}).catch((e) => {
						// this.$utils.showToast('登录过期请稍后尝试！', 1000)
					})
				}, 100)
			},
			initAnswer() {
				this.$apis.getSurveyAnswer({
					survey_id: 0,
				}).then((element) => {
					this.$utils.showLog('提交我的学籍', element)
					this.list = JSON.parse(element.answer)
					this.$utils.setStorage('answer', element.answer)
				}).catch((e) => {
					// this.$utils.showToast('登录过期请稍后尝试！', 1000)
				})
			},
			/**
			 * 选择&&提交
			 * @param {Number} proindex  父级index索引
			 * @param {Object} item      当前列表数据
			 * @param {Number} nexindex  子级index索引
			 */
			getSelected(proindex, item, nexindex) {
				console.log(proindex, item, nexindex)
				if (item.disabled) {
					return false
				}
				this.$nextTick(() => {
					this.list[proindex].selectList.forEach((items, sindex) => {
						console.log('sindex', sindex)
						if (item.name === '自由职业/在读' || item.name === '全职妈妈/太太') {
							console.log('===|', proindex)
							if (nexindex === sindex) {
								items.actived = true
								this.$forceUpdate()
							} else {
								items.actived = false
							}
							this.list[3].selectList.forEach((items, sindex) => {
								items.disabled = true
								items.actived = false
							})
							this.$forceUpdate()
							this.getSave()
						} else if(proindex===2){
							if(item.name != '自由职业/在读' &&item.name != '全职妈妈/太太'){
								if (nexindex === sindex) {
									items.actived = true
								} else {
									items.actived = false
								}
								this.list[3].selectList.forEach((items, sindex) => {
									items.disabled = false
									items.actived = false
								})
								this.$forceUpdate()
							}
							this.getSave()
						}else {
							if (nexindex === sindex) {
								items.actived = true
							} else {
								items.actived = false
								this.$forceUpdate()
							}
							this.$forceUpdate()
							this.getSave()
						}
						uni.$uv.toast('已更改')

					})
				})
				if (proindex === (this.list.length - 1)) {

					this.getSave()
				}
			}
		},

	}
</script>

<style lang="scss">
	page {

		background-image: url('https://1257557568.vod-qcloud.com/d34b21d5vodcq1257557568/7b1391ad1397757896686948962/ERawiiRPGZkA.png');
		background-repeat: no-repeat;
		background-size: 100% 100%;
	}

	.content {
		width: 100%;
		height: 100%;

		// 用户信息
		.user-box {
			width: 694rpx;
			height: 160rpx;
			opacity: 1;
			border-radius: 14rpx;
			background: linear-gradient(90deg, rgba(255, 255, 255, 0.2) 0%, rgba(255, 255, 255, 0) 100%), rgba(255, 255, 255, 0.3);
			border: 2rpx solid rgba(255, 255, 255, 1);
			display: flex;
			align-items: center;
			margin: 0 auto;
			margin-bottom: 26rpx;
			margin-top: 34rpx;

			.user-logo {
				border-radius: 50%;
				width: 126rpx;
				border: 1rpx solid #fff;
				height: 126rpx;
				margin-left: 26rpx;
				opacity: 1;


			}

			.user-info {
				margin-left: 24rpx;

				.user-name {
					margin-bottom: 10rpx;
					width: 170rpx;
					opacity: 1;
					font-size: 40rpx;
					font-weight: 700;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;

				}

				.user-tag-box {
					display: flex;
					align-items: center;
					font-size: 28rpx;
					font-weight: 300;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;

					.user-num {
						font-size: 30rpx;
						height: 40rpx;

					}

					.user-tag {

						font-size: 20rpx;
						font-weight: 400;
						height: 44rpx;
						color: rgba(51, 51, 51, 1);
						text-align: left;
						margin-left: 30rpx;
						padding-right: 20rpx;
						display: flex;
						align-items: center;
						border-radius: 20rpx;
						background: linear-gradient(93.89deg, rgba(255, 232, 158, 1) 0%, rgba(241, 218, 167, 1) 100%);

						.icon {
							width: 28rpx;
							height: 28rpx;
							margin-left: 10rpx;
							margin-right: 14rpx;
						}
					}
				}
			}
		}

		// 列表
		.ques-box {
			width: 694rpx;
			margin: 0 auto;
			// height: 100%;
			opacity: 1;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 0.5);
			border: 1.6rpx solid rgba(232, 232, 232, 1);
			box-shadow: 4rpx 4rpx 8rpx rgba(0, 0, 0, 0.25);
			padding-top: 20rpx;
			padding-bottom: 46rpx;

			.ques-list {
				border-bottom: 2rpx dashed rgba(209, 209, 209, 1);
				width: 638rpx;
				height: 100%;
				padding-bottom: 44rpx;
				margin: 0 auto;

				.ques-title {
					display: flex;
					padding-top: 22rpx;
					align-items: center;
					/** 文本1 */
					font-size: 28rpx;
					margin-left: 15rpx;
					font-weight: 400;
					color: rgba(0, 0, 0, 1);
					text-align: left;
					vertical-align: top;
					margin-bottom: 20rpx;

					.ques-sort {
						font-size: 40rpx;
						width: 50rpx;
						font-weight: 400;
						letter-spacing: 0px;
						position: relative;
						bottom: 6rpx;
						margin-right: 8rpx;
						color: rgba(0, 0, 0, 1);
						text-align: left;
						vertical-align: top;
					}

					.ques-desc {
						/** 文本1 */
						font-size: 18rpx;
						display: flex;
						align-items: center;
						margin-left: 10rpx;
						letter-spacing: 0px;
						color: rgba(189, 189, 189, 1);

						span {
							color: red;
							margin-right: 5rpx;
							margin-left: 10rpx;
							font-weight: 700;
							font-size: 16rpx;
						}
					}
				}

				.quest-box {
					width: 580rpx;
					margin: 0 auto;
					height: 100%;
					margin-left: 75rpx;

					.quest-label {
						/** 文本1 */
						font-size: 24rpx;
						font-weight: 400;
						margin-bottom: 20rpx;
						display: flex;
						align-items: center;
						letter-spacing: 0.24rpx;
						color: rgba(37, 56, 100, 1);
						text-align: left;
						vertical-align: top;

						.icon {
							width: 22rpx;
							height: 22rpx;
							display: inline-block;
							margin-right: 16rpx;
						}
					}

				}

			}
		}

		// 间隔
		.gap {
			width: 100%;
			height: 50rpx;
			opacity: 0;
			background: rgba(255, 255, 255, 0);
		}
	}
</style>